<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet" href="jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css">
<link rel="stylesheet" href="jquery-easyui-1.5.3/themes/icon.css" type="text/css">
<script type="text/javascript">
    var url;

    //新增
    function newUser() {
        $("#dlg").dialog('open').dialog('setTitle', '新增');
        $("#fm").form('clear');
        url = 'UserServlet?f=add'
    }

    function editUser() {
        var row = $("#mTb").datagrid('getSelected');
        if (row) {
            $("#dlg").dialog('open').dialog('setTitle', '修改');
            $("#fm").form('load', row);
            url = "UserServlet?f=update&id=" + row.id;
        }
    }

    //提交新增
    function saveUser() {
        $("#fm").form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                var result = eval('(' + result + ')');

                if (result.success) {
                    $.messager.show({
                        title: '提示',
                        msg: result.message
                    });
                    $("#dlg").dialog('close');
                    $("#mTb").datagrid('reload');
                } else {
                    $.messager.show({
                        title: '提示',
                        msg: result.message
                    });
                }
            }
        });
    }


    function removeUser() {
        var row = $("#mTb").datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '您确定要删除吗？', function (r) {
                if (r) {
                    $.post('UserServlet?f=delete', {id: row.id}, function (result) {
                        if (result.success) {
                            $.messager.show({
                                title: '提示',
                                msg: result.message
                            });
                            $("#mTb").datagrid('reload');
                        } else {
                            $.messager.show({
                                title: '提示',
                                msg: result.message
                            });
                        }
                    }, 'json')
                }
            });
        }
    }

    function doSearch() {
        $('#mTb').datagrid('load', {
            name: $('#username').val(),
            xueli: $('#userxueli').val()
        });
    }


</script>
<body>
<table id="mTb"
       class="easyui-datagrid" width="100%"
       url="UserServlet?f=query"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="id" width="50" data-options="hidden: true">编号</th>
        <th field="username" width="50">姓名</th>
        <th field="password" width="50">密码</th>
        <th field="sex" width="50">性别</th>
        <th field="age" width="50">年龄</th>
        <th field="xueli" width="50">学历</th>
        <th field="address" width="50">地址</th>
    </tr>
    </thead>
</table>

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true"
     buttons="#dlg-buttons" data-options="modal:true">
    <div class="ftitle">用户信息</div>
    <form id="fm" method="post" novalidate>
        <div class="fitem">
            <label>姓名:</label>
            <input name="username" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>密码:</label>
            <input name="password" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>性别:</label>
            <input name="sex" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>年龄:</label>
            <input name="age" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>学历:</label>
            <input name="xueli" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>地址:</label>
            <input name="address" class="easyui-validatebox" required="true">
        </div>
    </form>
</div>

<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">提交</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

</body>
</html>
